
<template >
    
    <div style="width:100%;height:100vh;overflow:hidden">
        <img src="../assets/webLoginbg.jpg" alt="" style="width:100%;height:100vh;">

        <div class="formContainer">
            <h3>物业官网</h3>
            <el-form
                ref="loginFormRef"
                :model="loginForm" 
                status-icon
                :rules="loginRules"
                label-width="70px" 
                class="loginform">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="验证码" prop="captcha" >
                    <el-input v-model="loginForm.captcha" autocomplete="off" style="width:150px;margin-right: 20px;"/>
                    <div id="captchaBox">
                        <div v-html="captchaData" style="background:white"></div>
                    </div>
                    <el-icon id="icon" @click="changeCaptcha()" ><Refresh /></el-icon>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">登陆</el-button>
                </el-form-item>
            </el-form>
        </div>


        <!-- <button @click="handleLogin">login</button> -->
    </div>
</template>
<!--设置本地存储-->
<script setup>
    import {Refresh} from "@element-plus/icons-vue";
    import {reactive,ref,onMounted} from "vue"
    import { useRouter } from "vue-router"
    import axios from "axios"
    import { ElMessage } from 'element-plus'
    import { useStore } from "vuex"

    const store = useStore()
    const loginForm = reactive({ //动态变量
        username:"",
        password:""
    })//表单绑定的响应式对象

    const loginFormRef = ref() //get表单的引用对象

    const loginRules = reactive({ //表单验证规则
        username:[
            {
                required:true,message:"请输入用户名",trigger:"blur"
            }
        ],
        password:[
            {
                required:true,message:"请输入密码",trigger:"blur"
            }
        ],
        captcha:[
            {
                required:true,message:"请输入验证码",trigger:"blur"
            }
        ],
    })
    

    const captchaData = ref() //验证码图片
    const captchaText = ref() //验证码
    onMounted(() => {
        getCaptcha();
    });
    const getCaptcha = async () => {
        // console.log("获取验证码")
        const res2 = await axios.post("/webapi/user/login",loginForm);
        captchaData.value = res2.data.captchaData.data
        captchaText.value = res2.data.captchaData.text
    };

    const changeCaptcha= ()=>{ //改变验证码
        getCaptcha()
    }

const router = useRouter()
//提交表单函数
const submitForm = ()=>{
    //1.校验表单
    loginFormRef.value.validate((valid)=>{
        if(valid){
            axios.post("/webapi/user/login",loginForm)//反向代理路径 vue.config.js文件里
            .then(res=>{
                // console.log(res.data)
                if(captchaText.value.toLowerCase()===loginForm.captcha.toLowerCase()){
                    if(res.data.ActionType==="OK"){
                    console.log(res.data.data)
                    store.commit("webchangeUserInfo",res.data.data)
                    // store.commit("changeGetterRouter",false)
                    router.push("/home")

                    }else{
                        ElMessage.error('用户名密码不匹配')
                    }
                }else{
                    ElMessage.error('验证码不正确')
                }
            })
            // router.push("/index")
        }
    })
    
}






</script>


<style lang="scss" scoped>

    .formContainer{
        width:500px;
        height: 350px;
        position: fixed; //定位
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);//平移
        background:rgba($color:#000000,$alpha:0.7);
        color:white;
        text-align: center;
        text-shadow: 2px 2px 4px red, 0 0 2em blue, 0 0 0.4em blue;;
        padding: 20px;
        border-radius:20px;
        h3{
            font-size: 35px;
        }
        .loginform{
            margin-top: 20px;
        }

        #icon{
            margin-left: 10px;
            font-size: 30px;

        }
        #icon:hover{
            cursor: pointer; /* 鼠标移上去时将光标样式设置为手形 */
        }
    }
.el-button{
    margin:0 auto ;
    font-size: 25px;
    margin-top:20px;
    width:150px;
    height: 70px;
    transform: translate(-40%);//平移
    
}
.el-button:hover{
    transition: all 2s;
    transform: translate(1px);//平移
    border-radius:5px 100% 100% 5px;
}
//v-deep深度匹配
::v-deep .el-form-item__label{
    color:white
}
</style>